<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>英语问答练习系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            line-height: 1.6;
        }
        
        .question-box {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
        }
        
        .input-group {
            margin: 20px 0;
        }
        
        input, select {
            width: 100%;
            padding: 8px;
            margin: 5px 0;
            font-size: 16px;
        }
        
        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        
        .result {
            font-weight: bold;
            margin: 10px 0;
            color: #2ecc71;
            padding: 10px;
            border-radius: 5px;
            background-color: #f0f8ff;
        }
        
        .error {
            color: #e74c3c;
            margin-top: 5px;
        }
        
        .history-box {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }
        
        .correct {
            background-color: #d4edda;
        }
        
        .incorrect {
            background-color: #f8d7da;
        }
    </style>
</head>
<body>
    <h2 style="text-align: center">英语问答练习<br>注意：所有答案是唯一的，提交答案前可改，之后不能再改，只能再来一次</h2>
    <div id="question-list" class="question-box"></div>
    <div id="answer-list" class="question-box"></div>
    
    <div class="input-group">
        <button id="checkBtn" onclick="checkAnswers()">提交答案</button>
        <button id="resetBtn" onclick="initQuiz()">再来一次</button>
    </div>
    
    <div id="result" class="result"></div>
    <div class="error" id="grammarError"></div>
    
    <div class="history-box">
        <h3>错题记录</h3>
        <ul id="errorHistory"></ul>
    </div>
    
    <script>
        // 问题库
        const questionBank = [
            {
                question: "Where are you from?",
                answer: "I am from China.",
                keywords: ["I am from", "I'm from"],
                grammar: {
                    required: ["主谓一致", "国家/城市名称大写"],
                    optional: ["缩写形式（'m）"]
                },
                correctAnswer: "I am from [国家/城市]."
            },
            {
                question: "Where is Li Ming from?",
                answer: "He is from Canada.",
                keywords: ["He is from", "He's from"],
                grammar: {
                    required: ["第三人称单数be动词", "人名大写", "国家/城市名称大写"],
                    optional: ["缩写形式（'s）"]
                },
                correctAnswer: "He is from [国家/城市]."
            },
            {
                question: "Where is your mother from?",
                answer: "She is from Britain.",
                keywords: ["She is from", "She's from"],
                grammar: {
                    required: ["第三人称单数be动词", "形容词性物主代词", "国家/城市名称大写"],
                    optional: ["缩写形式（'s）"]
                },
                correctAnswer: "She is from [国家/城市]."
            },
            {
                question: "Where do you live?",
                answer: "I live in China.",
                keywords: ["I live in"],
                grammar: {
                    required: ["助动词do", "live in搭配", "地点名词"],
                    optional: ["介词使用"]
                },
                correctAnswer: "I live in [地点]."
            },
            {
                question: "Where does he live?",
                answer: "He lives in Ottawa.",
                keywords: ["He lives in"],
                grammar: {
                    required: ["助动词does", "第三人称单数动词（lives）", "live in搭配"],
                    optional: ["主谓一致"]
                },
                correctAnswer: "He lives in [地点]."
            },
            {
                question: "Can you clean the windows?",
                answer: "No, I can’t.",
                keywords: ["Yes, I can.", "No, I can't."],
                grammar: {
                    required: ["情态动词can开头", "肯否定回答格式"],
                    optional: ["缩写形式（can't）"]
                },
                correctAnswer: "Yes, I can. / No, I can't."
            },
            {
                question: "What are you doing?",
                answer: "We are playing computer games.",
                keywords: ["I am doing", "I'm doing"],
                grammar: {
                    required: ["现在进行时（be + doing）", "主谓一致"],
                    optional: ["缩写形式（'m）"]
                },
                correctAnswer: "I am [动词ing形式]."
            },
            {
                question: "What is Danny doing?",
                answer: "He is watering the flowers.",
                keywords: ["He is doing", "He's doing"],
                grammar: {
                    required: ["第三人称单数be动词（is）", "现在进行时（be + doing）"],
                    optional: ["缩写形式（'s）"]
                },
                correctAnswer: "He is [动词ing形式]."
            },
            {
                question: "What do you want to eat?",
                answer: "I want to eat noodles.",
                keywords: ["I want to eat"],
                grammar: {
                    required: ["助动词do", "want to do结构", "名词单复数"],
                    optional: ["食物名词拼写"]
                },
                correctAnswer: "I want to eat [食物]."
            },
            {
                question: "What would you like?",
                answer: "I would like some rice.",
                keywords: ["I would like", "I'd like"],
                grammar: {
                    required: ["would like固定搭配", "名词单复数"],
                    optional: ["缩写形式（'d）"]
                },
                correctAnswer: "I would like [食物/物品]."
            },
            {
                question: "Would you like something to drink?",
                answer: "Yes, I’d like some pear juice.",
                keywords: ["Yes, please.", "No, thank you."],
                grammar: {
                    required: ["礼貌回答格式", "句尾标点"],
                    optional: ["首字母大写"]
                },
                correctAnswer: "Yes, please. / No, thank you."
            },
            {
                question: "What does your mother want to eat?",
                answer: "She wants to eat some chicken.",
                keywords: ["She wants to eat"],
                grammar: {
                    required: ["助动词does", "第三人称单数动词（wants）", "want to do结构"],
                    optional: ["食物名词拼写"]
                },
                correctAnswer: "She wants to eat [食物]."
            },
            {
                question: "What do you do at the weekend?",
                answer: "Sometimes I read books.",
                keywords: ["I do", "I often do"],
                grammar: {
                    required: ["助动词do", "一般现在时动词原形", "at the weekend搭配"],
                    optional: ["频率副词（often）"]
                },
                correctAnswer: "I [动词原形] at the weekend."
            },
            {
                question: "What does your father do at the weekend?",
                answer: "He often plays football.",
                keywords: ["He does", "He often does"],
                grammar: {
                    required: ["助动词does", "第三人称单数动词（does）", "at the weekend搭配"],
                    optional: ["频率副词（often）"]
                },
                correctAnswer: "He [动词原形] at the weekend."
            },
            {
                question: "Do you often take pictures?",
                answer: "Yes, I do.",
                keywords: ["Yes, I do.", "No, I don't."],
                grammar: {
                    required: ["助动词do开头", "肯否定回答格式", "often位置"],
                    optional: ["缩写形式（don't）"]
                },
                correctAnswer: "Yes, I do. / No, I don't."
            },
            {
                question: "Can I help you?",
                answer: "I’d like a toy bus.",
                keywords: ["Yes, please. I want...", "No, thank you."],
                grammar: {
                    required: ["礼貌回答格式", "句尾标点"],
                    optional: ["首字母大写"]
                },
                correctAnswer: "Yes, please. I want... / No, thank you."
            },
            {
                question: "Excuse me. Do you have schoolbags?",
                answer: "Sorry, we don’t.",
                keywords: ["Yes, we have...", "No, we don't."],
                grammar: {
                    required: ["助动词do开头", "肯否定回答格式", "复数名词（schoolbags）"],
                    optional: ["句首礼貌用语（Excuse me）"]
                },
                correctAnswer: "Yes, we have [物品]. / No, we don't."
            },
            {
                question: "How much is the shirt？",
                answer: "It’s fifty yuan.",
                keywords: ["It is ... yuan", "It's ... yuan"],
                grammar: {
                    required: ["第三人称单数be动词（is）", "价格表达格式", "句尾标点"],
                    optional: ["缩写形式（'s）"]
                },
                correctAnswer: "It is ... yuan."
            },
            {
                question: "How much are the trousers?",
                answer: "They are one hundred yuan.",
                keywords: ["They are ... yuan", "They're ... yuan"],
                grammar: {
                    required: ["复数be动词（are）", "价格表达格式", "句尾标点"],
                    optional: ["缩写形式（'re）"]
                },
                correctAnswer: "They are ... yuan."
            },
            {
                question: "Where are you going this summer?",
                answer: "I’m going to Hainan.",
                keywords: ["I am going to", "I'm going to"],
                grammar: {
                    required: ["将来时（be going to）", "主谓一致", "地点名词大写"],
                    optional: ["this summer前不加介词"]
                },
                correctAnswer: "I am going to [地点] this summer."
            },
            {
                question: "How are you going there?",
                answer: "I’m going there by plane.",
                keywords: ["By + 交通工具", "I am going by"],
                grammar: {
                    required: ["by+交通工具格式", "主谓一致", "交通工具名词"],
                    optional: ["句首字母大写"]
                },
                correctAnswer: "By bus/car/train... 或 I am going by bus/car/train..."
            },
            {
                question: "What are you going to do at the Shaolin Temple?",
                answer: "I’m going there to learn kung fu.",
                keywords: ["I am going to", "I'm going to"],
                grammar: {
                    required: ["将来时（be going to）", "at+小地点搭配", "动词原形"],
                    optional: ["专有名词大写（Shaolin Temple）"]
                },
                correctAnswer: "I am going to [动词原形] at the Shaolin Temple."
            }
        ];

        // 全局变量
        let currentQuestions = [];
        let currentAnswers = [];
        let selectedAnswers = {};
        let errorList = []; // 错题记录
        let isSubmitted = false; // 标记是否已提交答案
        let studentName = ""; // 学生姓名

        // 初始化：随机选取22题并打乱问题和答案顺序
        function initQuiz() {
            isSubmitted = false;
            document.getElementById('checkBtn').disabled = false;
            
            const selectedQuestions = [...questionBank]
               .sort(() => Math.random() - 0.5)
               .slice(0, 22);

            currentQuestions = selectedQuestions.map(q => q.question);
            currentAnswers = selectedQuestions.map(q => q.answer);

            currentQuestions.sort(() => Math.random() - 0.5);
            currentAnswers.sort(() => Math.random() - 0.5);

            // 重置答案和结果
            selectedAnswers = {};
            document.getElementById('result').textContent = '';
            document.getElementById('grammarError').textContent = '';

            showQuestionsAndAnswers();
        }

        // 显示问题和答案列表
        function showQuestionsAndAnswers() {
            const questionList = document.getElementById('question-list');
            questionList.innerHTML = '';

            currentQuestions.forEach((question, index) => {
                const questionDiv = document.createElement('div');
                questionDiv.id = `question-${index}`;
                questionDiv.innerHTML = `
                    <span>${index + 1}. ${question}</span>
                    <select id="answer-${index}" onchange="selectAnswer(${index})">
                        <option value="">请选择答案</option>
                        ${currentAnswers.map((answer, answerIndex) => `<option value="${answerIndex}">${answer}</option>`).join('')}
                    </select>
                `;
                questionList.appendChild(questionDiv);
            });
        }

        // 选择答案
        function selectAnswer(questionIndex) {
            if (isSubmitted) return; // 已提交后禁止修改
            
            const selectElement = document.getElementById(`answer-${questionIndex}`);
            const answerIndex = selectElement.value;
            if (answerIndex !== '') {
                selectedAnswers[questionIndex] = currentAnswers[answerIndex];
            } else {
                delete selectedAnswers[questionIndex];
            }
        }

        // 检查答案
        function checkAnswers() {
            if (isSubmitted) return; // 防止重复提交
            
            let correctCount = 0;
            errorList = [];

            currentQuestions.forEach((question, index) => {
                const userAnswer = selectedAnswers[index];
                const correctQuestionData = questionBank.find(q => q.question === question);
                const questionDiv = document.getElementById(`question-${index}`);
                const selectElement = document.getElementById(`answer-${index}`);
                
                // 禁用选择框，防止修改
                selectElement.disabled = true;
                
                if (userAnswer === correctQuestionData.answer) {
                    correctCount++;
                    questionDiv.classList.add('correct');
                } else {
                    questionDiv.classList.add('incorrect');
                    const errorEntry = {
                        question: question,
                        yourAnswer: userAnswer || "未作答",
                        correctAnswer: correctQuestionData.answer,
                        issues: ["答案错误"]
                    };
                    errorList.push(errorEntry);
                }
            });

            // 计算每个题的分值（总分100分）
            const totalQuestions = currentQuestions.length;
            const scorePerQuestion = 100 / totalQuestions;
            const totalScore = Math.round(correctCount * scorePerQuestion * 100) / 100; // 保留两位小数

            // 获取当前日期
            const currentDate = new Date();
            const formattedDate = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;

            // 显示结果
            const resultDiv = document.getElementById('result');
            if (errorList.length === 0) {
                resultDiv.textContent = `恭喜 ${studentName}！全部答对了！你的得分是：${totalScore} 分（满分100分），完成日期：${formattedDate}`;
            } else {
                resultDiv.textContent = `${studentName} 你答对了 ${correctCount} 题，答错了 ${errorList.length} 题，总得分为：${totalScore} 分（满分100分），完成日期：${formattedDate}`;
            }

            // 显示错误提示
            const grammarErrorDiv = document.getElementById('grammarError');
            if (errorList.length > 0) {
                grammarErrorDiv.innerHTML = "错题详情：<br>";
                errorList.forEach(error => {
                    grammarErrorDiv.innerHTML += `
                        <div style="margin-bottom: 10px; padding: 5px; background-color: #ffebee; border-radius: 5px;">
                            <strong>问题：</strong>${error.question}<br>
                            <strong>你的回答：</strong>${error.yourAnswer}<br>
                            <strong>正确答案：</strong>${error.correctAnswer}<br>
                            <strong>错误原因：</strong>${error.issues.join(", ")}
                        </div>
                    `;
                });
            } else {
                grammarErrorDiv.textContent = "";
            }

            // 更新错题记录
            updateErrorHistory();
            
            // 标记为已提交，并禁用提交按钮
            isSubmitted = true;
            document.getElementById('checkBtn').disabled = true;
        }

        // 更新错题列表
        function updateErrorHistory() {
            const historyList = document.getElementById('errorHistory');
            historyList.innerHTML = '';
            errorList.forEach((error, idx) => {
                historyList.innerHTML += `
                    <li style="margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 5px;">
                        <strong>问题：</strong>${error.question}<br>
                        <strong>你的回答：</strong>${error.yourAnswer}<br>
                        <strong>正确答案：</strong>${error.correctAnswer}<br>
                        <strong>错误原因：</strong>${error.issues.join(", ")}
                    </li>
                `;
            });
        }

        // 页面加载后初始化并要求输入姓名
        window.onload = function() {
            studentName = prompt("请输入你的姓名：");
            if (!studentName) {
                studentName = "匿名用户";
            }
            initQuiz();
        };
    </script>
</body>
</html>